﻿layui.use(['form', 'laydate', 'util', 'layer', 'table', 'jquery'], function () {
    var form = layui.form;
    var layer = layui.layer;
    var laydate = layui.laydate;
    var util = layui.util;
    var $ = layui.$;
    var table = layui.table;

    // 获取从视图中嵌入的 ApiUrl
    var apiUrl = $('#apiUrl').data('url');

    // 全局临时容器
    let tempDeviceData = [];

    // 初始化第一个列表的数据
    function initFirstTable() {
        // 假设我们有一个函数convertToTableData用于将tempDeviceData转换为表格所需的格式
        let tableData = convertToTableData(tempDeviceData);
        table.render({
            elem: '#deviceTable',
            page: true, // 开启分页，
            data: tableData,
            cols: [[
                { field: 'Id', title: '序号', width: 70 },
                { field: 'DeviceNumber', title: '设备编号', width: 150 },
                { field: 'DeviceName', title: '设备名称', width: 150 },
                { field: 'DeviceType', title: '设备类型', width: 150 },
                { fixed: 'right', title: '操作', toolbar: '#operationBar', width: 150 }
            ]]
        });

        // 监听操作列的按钮点击事件
        table.on('tool(deviceTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                // 从临时容器中移除数据
                let indexToRemove = tempDeviceData.findIndex(device => device.Id === obj.data.Id);
                if (indexToRemove !== -1) {
                    tempDeviceData.splice(indexToRemove, 1);
                }
                // 从表格中移除行（这会自动发生，因为我们重新渲染了表格）
                // 但为了保持一致性，我们仍然调用obj.del();（尽管在这种情况下它可能是多余的）
                obj.del();
                // 刷新第一个列表以显示更改（可选，因为我们已经更新了数据源）
                // initFirstTable();
            }
        });
    }

    // 弹出框中的第二个列表的初始化
    function openDevicePopup() {
        layer.open({
            type: 1,
            area: ['600px', '400px'],
            title: '添加设备',
            content: `
                <div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">机床编号：</label>
                            <input type="text" id="deviceNumber" placeholder="请输入" style="width: 200px;" autocomplete="off" class="layui-input">
                        </div>
                        <button type="button" class="layui-btn layui-btn-primary layui-bg-blue" id="searchBtn">搜索</button>
                    </div>
                    <table class="layui-table" id="deviceTables"></table>
                </div>
                <script type="text/html" id="popupOperationBar">
                    <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>
            `,
            success: function (layero, index) {
                // 初始化第二个列表的数据
                function initSecondTable() {
                    // 从搜索框获取设备编号（如果有的话）
                    var number = $('#deviceNumber', layero).val();
                    // 这里我们不需要从服务器获取数据，因为我们是基于临时容器的
                    // 但为了模拟搜索功能，我们可以过滤tempDeviceData
                    //let filteredData = tempDeviceData.filter(device => !number || device.DeviceNumber.includes(number));
                    //let tableData = convertToTableData(filteredData);
                    var number = $('#deviceNumber', layero).val(); // 获取搜索框中的设备编号
                    table.render({
                        elem: '#deviceTables',
                        url: apiUrl + 'smread/api/Device/GetShopDevice', // 数据接口
                        where: { Number: number },
                        page: true, // 开启分页
                        cols: [[
                            { field: 'Id', title: '序号', width: 70 },
                            { field: 'DeviceNumber', title: '设备编号', width: 150 },
                            { field: 'DeviceName', title: '设备名称', width: 150 },
                            { field: 'DeviceType', title: '设备类型', width: 150 },
                            { fixed: 'right', title: '操作', toolbar: '#popupOperationBar', width: 150 }
                        ]],
                        parseData: function (res) {
                            return {
                                "code": res.Code,
                                "msg": res.Message,
                                "count": res.TotalCount || res.Data.length, // 如果后端没有提供总数，则使用当前页的数据长度作为回退
                                "data": res.Data
                            };
                        }
                    });

                    // 监听操作列的按钮点击事件
                    table.on('tool(deviceTables)', function (obj) {
                        var data = obj.data;
                        console.log(data)
                        if (obj.event === 'add') {
                            if (data.WorkshopId != 0 && data.WorkshopId != null) {
                                layer.confirm('该设备已经在其它车间，确定添加吗？', function (index) {
                                    // 由于我们不能直接操作DOM元素来添加数据（因为数据是临时的），
                                    // 我们需要从表格的当前显示数据中获取要添加的对象（这通常不是一个好方法，
                                    // 因为它依赖于表格的当前状态，但在这里为了简化而这样做）。
                                    // 一个更好的做法是在用户点击“添加”之前，就将所选数据保存到某个变量中。
                                    let selectedData = obj.data; // 这通常是当前行的数据
                                    // 将其添加到临时容器中（这里不检查重复，你可能需要添加这种逻辑）
                                    tempDeviceData.push(selectedData);
                                    // 刷新第一个列表以显示更改
                                    initFirstTable();
                                    // 关闭弹出层
                                    layer.close(index);
                                });
                            } else {
                                // 由于我们不能直接操作DOM元素来添加数据（因为数据是临时的），
                                // 我们需要从表格的当前显示数据中获取要添加的对象（这通常不是一个好方法，
                                // 因为它依赖于表格的当前状态，但在这里为了简化而这样做）。
                                // 一个更好的做法是在用户点击“添加”之前，就将所选数据保存到某个变量中。
                                let selectedData = obj.data; // 这通常是当前行的数据
                                // 将其添加到临时容器中（这里不检查重复，你可能需要添加这种逻辑）
                                tempDeviceData.push(selectedData);
                                // 刷新第一个列表以显示更改
                                initFirstTable();
                                // 关闭弹出层
                                //layer.close(index);
                            }                            
                        } else if (obj.event === 'del') {
                            // 从临时容器中移除数据
                            let indexToRemove = tempDeviceData.findIndex(device => device.Id === obj.data.Id);
                            if (indexToRemove !== -1) {
                                tempDeviceData.splice(indexToRemove, 1);
                            }
                            // 从表格中移除行（这会自动发生，因为我们重新渲染了表格）
                            // 但为了保持一致性，我们仍然调用obj.del();（尽管在这种情况下它可能是多余的）
                            //obj.del();
                            // 刷新第一个列表以显示更改（可选，因为我们已经更新了数据源）
                            initFirstTable();
                        }
                    });
                }

                // 初始化第二个列表
                initSecondTable();

                // 绑定搜索按钮事件（这里不需要重新初始化表格，只需要过滤数据并重新渲染即可，
                // 但为了简化，我们仍然调用initSecondTable();它会处理过滤和渲染）
                $('#searchBtn', layero).on('click', function () {
                    initSecondTable();
                });
            }
        });
    }

    // 辅助函数：将临时容器中的数据转换为表格所需的格式（如果有必要的话）
    function convertToTableData(data) {
        // 根据你的表格配置和数据结构，这里可能需要进行一些转换
        // 例如，如果你的表格需要特定的字段顺序或格式，你需要在这里处理它
        return data; // 或者返回转换后的数据
    }

    // 初始化第一个列表（从空的临时容器开始）
    initFirstTable();

    // 绑定按钮事件以打开弹出框
    $('#openPopupBtn').on('click', function () {
        openDevicePopup();
    });

    $('#Entry').on('click', function () {
        window.location.href = "/ShopMachine/Workshop";
    });
    

    // 提交事件
    form.on('submit(formDemo)', function (data) {
        var field = data.field; // 获取表单字段值
        console.log(field)
        // 此处可执行 Ajax 等操作
        $.ajax({
            url: apiUrl + 'smwrite/api/Workshop/AddWorkshop',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(field),
            success: function (res) {
                var fields = {
                    WorkshopId:res.Data,
                    DeviceIds: tempDeviceData.map(res => res.Id)
                }
                $.ajax({
                    url: apiUrl + 'smwrite/api/Device/UpdShopDevice',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(fields),
                    success: function (res) {
                        console.log(res.Data)
                    },
                    error: function (err) {
                        // 处理添加失败的逻辑
                        console.error(err);
                    }
                });
                // 处理添加成功的逻辑
                console.log(res.Data);
                window.location.href = '/ShopMachine/Workshop';
            },
            error: function (err) {
                // 处理添加失败的逻辑
                console.error(err);
            }
        });
        return false; // 阻止默认 form 跳转
    });
});